<template>
  <!--用户中心容器-->
  <div class="ucenterWrap" v-if="isShow">
    <!--用户信息-->
    <div class="userMessage" @click="toOthers('/ucenter/unav')">
      <!--用户头像及昵称-->
      <div class="left">
        <!--头像-->
        <img class="avatar" src="@/views/ucenter/images/avatar.png" />
        <div class="userDetail">
          <p>{{ userStore.userName }}</p>
          <p>普通用户</p>
        </div>
      </div>
      <div class="right">
        <!--二维码-->
        <i class="erweima"></i>
        <!--pro会员-->
        <div class="pro">
          <i class="proImg"></i>
          <div class="protext">
            <p class="texttop">Pro会员</p>
            <p class="textbottom">立即开通<i></i></p>
          </div>
        </div>
      </div>
    </div>
    <!--我的资产及红包优惠栏-->
    <div class="assetsWrap">
      <div class="myAssets">我的资产</div>
      <ul class="discount">
        <li>
          <RouterLink to="/reward/index">
            <p>¥0</p>
            <p>余额</p>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/redpacket">
            <p>2</p>
            <p>红包</p>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/coupon">
            <p>0</p>
            <p>优惠券</p>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/points/index">
            <p>0</p>
            <p>积分</p>
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/giftCard/list">
            <p>0</p>
            <p>礼品卡</p>
          </RouterLink>
        </li>
      </ul>
    </div>
    <!--红包链接-->
    <div class="hongbaoLink">
      <a href="https://act.you.163.com/act/pub/ssr/9LMS7XDk7QHr.html?appConfig=1_1_1"><img
          src="@/views/ucenter/images/hongbao.webp" /></a>
    </div>
    <!--菜单列表-->
    <div class="memuWrap">
      <ul class="menu">
        <li v-for="item, index in menuList" :key="index" @click="toOthers(item.path)">
          <router-link :to="item.path">
            <i :style="`background-position: ${item.positionX}rem ${item.positionY}rem`"></i>
            <p>{{ item.keyword }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <!--退出登录按钮-->
    <div class="logoutBtn" @click="logout">退出登录</div>
  </div>
  <RouterView></RouterView>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores/user';
import { showConfirmDialog } from 'vant';
import { useRouter, useRoute } from 'vue-router';
const userStore = useUserStore()
const Router = useRouter()
const route = useRoute()
const isShow = ref(true)
//监听路由
watch(() => { return route.fullPath }, (newValue) => {
  if (newValue === '/ucenter') {
    isShow.value = true
  }
}, { immediate: true })

let menuList = ref([
  {

    positionX: -3.1333,
    positionY: -.6933,
    keyword: '我的订单',
    path: '/order/myList'

  },
  {

    positionX: -.6933,
    positionY: -3.04,
    keyword: '账号管理',
    path: '/ucenter/aliasInfo'

  },
  {

    positionX: -3.8267,
    positionY: 0,
    keyword: '我的手机号',
    path: '/ucenter/mymobile?'

  },
  {

    positionX: -3.1333,
    positionY: -2.08,
    keyword: '周六一起拼',
    path: '/pin/static'

  },
  {

    positionX: -1.3867,
    positionY: -1.6533,
    keyword: '售后服务',
    path: '/aftersale/service'

  },
  {

    positionX: -3.1333,
    positionY: 0,
    keyword: '邀请返利',
    path: '/lead/newInde'

  },
  {

    positionX: -1.3867,
    positionY: -2.3467,
    keyword: '优先购',
    path: '/preemption/index'

  },
  {

    positionX: -3.1333,
    positionY: -1.3867,
    keyword: '积分中心',
    path: '/points/index'

  },
  {

    positionX: -1.4,
    positionY: -3.04,
    keyword: '会员俱乐部',
    path: '/membership/index'

  },
  {
    positionX: -.6933,
    positionY: -1.6533,
    keyword: '地址管理',
    path: '/address/list'

  },
  {
    positionX: 0,
    positionY: -3.04,
    keyword: '支付安全',
    path: '/user/securityCenter'

  },
  {
    positionX: -1.7467,
    positionY: 0,
    keyword: '帮助与客服',
    path: '/help/new#/'

  },
  {
    positionX: -2.44,
    positionY: -.6933,
    keyword: '意见反馈',
    path: '/feedback'

  },
  {
    positionX: -.88,
    positionY: 0,
    keyword: '我的竞拍',
    path: '/auction/wap/profile/list'
  }
])
onMounted(async () => {
  //获取用信息
  await userStore.getUserInfo()
})
//点击退出登录按钮的回调
const logout = () => {
  //调用vant弹出框
  showConfirmDialog({
    title: '退出登录?',
    confirmButtonColor: '#dd1a21',
  })
    //点击弹框确定按钮的回调
    .then(async () => {
      //调用store中的退出登录action
      await userStore.loginOut()
      //退出登录跳转主页
      Router.push({ name: 'Home' })
    })
    //点击弹框取消按钮的回调
    .catch(() => {
      return
    });
}
//点击用户导航栏的回调
const toOthers = (path: string) => {
  console.log(path)
  isShow.value = false
  Router.push(path)
}
</script>

<style scoped>
/*用户中心容器样式 */

/*用户信息容器样式 */
.ucenterWrap {
  padding-bottom: 1.3333rem;
}

.userMessage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: .4rem;
  height: 3.6rem;
  background: url(@/views/ucenter/images/bgImg.png) no-repeat bottom;
  background-size: 100%;
  overflow: scroll;
}

/*用户信息样式*/
.userMessage .left {
  padding: .8533rem 0rem;
  display: flex;
}

/*头像样式*/
.avatar {
  height: 1.8933rem;
  width: 1.8933rem;
  border-radius: 50%;
}

/**用户信息样式 */
.userDetail {
  padding: .2667rem 0px;
  margin-left: .4rem;
}

.userMessage .left p {
  line-height: .6rem;
  font-size: .48rem;
  margin-bottom: .1333rem;
  color: #fff;
}

.userMessage p:last-child {
  font-size: .3733rem;
  line-height: .3rem;
}

/*头像样式*/
.avatar {
  height: 1.8933rem;
  width: 1.8933rem;
  border-radius: 50%;
}

/**pro会员样式 */
.right {
  position: relative;
}

/**二维码样式 */
.erweima {
  display: inline-block;
  width: .8533rem;
  height: .8533rem;
  background: url(@/views/ucenter/images/erweima.png) no-repeat;
  background-size: 4.28rem 3.7067rem;
  position: absolute;
  right: .1867rem;
  top: .2133rem;
}

.pro {
  height: 1.12rem;
  background-image: linear-gradient(#574e44, #0e0e0e);
  border-top-left-radius: .8533rem;
  border-bottom-left-radius: .8533rem;
  display: flex;
  align-items: center;
  padding: 0rem .2667rem 0rem .1333rem;
  margin-top: 1.3867rem;
}

/**会员图标样式 */
.proImg {
  display: inline-block;
  width: .7467rem;
  height: .7467rem;
  background: url(@/views/ucenter/images/erweima.png) no-repeat -.7733rem -.88rem;
  background-size: 4.28rem 3.7067rem;
  margin: 0rem .12rem;
  border-radius: 50%;

}

/**会员文字样式 */
.protext {
  padding: .1333rem 0rem;
}

.protext p {
  color: #f9e0c0;
  font-size: .32rem;
}

.protext p.textbottom {
  font-size: .32rem;
}

.textbottom i {
  display: inline-block;
  width: .24rem;
  height: .24rem;
  background: url(@/views/ucenter/images/erweima.png) no-repeat -3.8267rem -0.64rem;
  background-size: 4.28rem 3.7067rem;
  margin: -0.0533rem 0rem 0rem .0533rem;
}

/*我的资产及红包优惠栏样式*/
.assetsWrap {
  border-bottom: .2667rem solid #f4f4f4;
}

.myAssets {
  margin-left: .4rem;
  color: #333333;
  font-size: .3733rem;
  line-height: 1.3867rem;
  border-bottom: .0133rem solid #d9d9d9;
}

.discount {
  display: flex;


}

.discount li {
  text-align: center;
  flex: 1;
  height: 2.1333rem;
  padding: .4267rem;
}

.discount li p:first-child {
  color: #333333;
  font-size: .4267rem;
  font-weight: 700;
  line-height: .64rem;
  margin-bottom: .0533rem;
}

.discount li p:last-child {
  color: #333333;
  font-size: .32rem;
  line-height: .48rem;
}

/**红包样式 */
.hongbaoLink {
  padding: .2667rem 0rem;
  display: flex;
  justify-content: center;
  border-bottom: .0267rem solid rgba(0, 0, 0, .15);
}

.hongbaoLink img {
  width: 9.2rem;
}

/**菜单列表样式 */
.menu {
  display: flex;
  flex-wrap: wrap;
}

.menu li {
  height: 2.4rem;
  width: 33.33%;
  border-right: .0267rem solid rgba(0, 0, 0, .15);
  border-bottom: .0267rem solid rgba(0, 0, 0, .15);
}

.menu i {
  display: inline-block;
  width: .6667rem;
  height: .6667rem;
  background: url(@/views/ucenter/images/erweima.png) no-repeat;
  background-size: 4.28rem 3.7067rem;
}

.menu li:last-child i {
  width: .84rem;
}

.menu a {
  display: block;
  padding: .6rem 0rem 0rem;
  text-align: center;
  margin: 0 auto;
}

.menu p {
  color: #333333;
  font-size: .32rem;
  line-height: .4533rem;
}

/**退出登录样式 */
.logoutBtn {
  color: #333333;
  font-size: .3733rem;
  height: 1.28rem;
  line-height: 1.28rem;
  text-align: center;
  border-top: .5333rem solid #f4f4f4;
  border-bottom: .2667rem solid #f4f4f4;
  box-sizing: content-box;
}
</style>